<template>
  <view class="content">
    <view class="btn bott-btn">
      <button class="new" type="primary" @click="handleAdd">关联供应商</button>
    </view>
    <view class="content-box">
      <view class="item-box-ng" v-for="(item, index) in lists">
        <view class="item-box">
          <text class="cph">{{ item.supplierName }}</text>
        </view>
        <button class="de-btns" size="mini" type="default" @click="deleteFun(item)">删除</button>
      </view>
      <uni-load-more :status="isMore" />
    </view>
    <uni-popup ref="popup">
      <view class="pop violation-pop">
        <view class="phxx-itemss">
          <view class="header">
            <view class="title">关联供应商</view>
          </view>
          <view class="top calling">
            <view class="infor-box">
              <view style="margin-right:6px;" class="label"><span style="display: inline-block;color:red;">*</span>供应商
              </view>
              <view class="select-view">
                <uni-data-select class="net-selct-box" v-model="linkData.cusId" :localdata="suppliersList"
                  @change="changeSupplier" placeholder="请选择供应商" label="text"></uni-data-select>
              </view>
            </view>
          </view>
          <view class="btn">
            <button class="mini-btn" @click="close()" type="primary" plain="true" size="mini">
              取消
            </button>
            <button class="mini-btn" @click="linkFun()" type="primary" plain="true" size="mini">
              关联
            </button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import { getSupProductList, deleSupProduct, getSimpleList, createPurProduct } from '@/api/product';
  import { getDictList } from '@/api/login';
  import { toast } from '@/utils/common.js';
  export default {
    data() {
      return {
        proName: '',
        linkBtnAuth: false,
        deleteAuth: false,
        isMore: 'more',
        relId: "",
        coalTypeList: [],
        lists: [],
        suppliersList: [],
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          proId: undefined
        },
        linkData: {
          proId: undefined,
          cusId: undefined
        }
      };
    },
    async onLoad(option) {
      this.queryParams.proId = option?.id;
      if (this.queryParams.proId) {
        this.getSupplierList();
      }
    },
    async onShow() {
      this.getDashboardAuth()
      this.lists = [];
      this.getSupplierList();
    },

    onPullDownRefresh() {
      this.lists = [];
      this.getSupplierList();
    },
    onReachBottom() {
      this.getSupplierList();
    },
    methods: {
      async getDashboardAuth() {
        this.linkBtnAuth = await getButtonShow("product:linkSupplier");
        this.deleteAuth = await getButtonShow("product:deleteSupplier");
      },
      close() {
        this.linkData.cusId = undefined
        this.$refs['popup'].close();
      },
      examineCancel() {

      },
      async linkFun() {
        this.linkData.proId = this.queryParams.proId
        if (!this.linkData.cusId) {
          toast('请选择供应商');
          return
        }
        const res = await createPurProduct(this.linkData);
        if (res?.code === 0) {
          toast('关联成功');
          this.close()
          this.queryParams.pageNo = 1
          this.getSupplierList()
        } else {
          toast(res.msg);
        }
      },
      changeSupplier(e) {
        this.linkData.cusId = e
      },
      deleteFun(item) {
        uni.showModal({
          title: '删除',
          content: '您确认删除该数据吗？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) this.deleteProduct(item.proSupId);
          }
        });
      },
      async deleteProduct(id) {
        const res = await deleSupProduct({ id: id });
        if (res?.code === 0) {
          toast('删除成功');
          this.queryParams.pageNo = 1
          this.getSupplierList()
        } else {
          toast('删除失败');
        }
      },
      async handleAdd() {
        let res = await getSimpleList()
        if (res.code == 0) {
          this.suppliersList = res.data.map(item => {
            return {
              value: item.id,
              text: item.customerName
            }
          })
        }
        this.$refs['popup'].open();
      },
      handleDetail(id) {
        uni.redirectTo({
          url: `/packageA/pages/supplier/details?id=${id}`
        });
      },

      linkToRecords(id) {
        uni.navigateTo({
          url: `/packageA/pages/product/records?id=${id}`
        });
      },

      confirmChange(data) {
        this.lists = [];
        this.getSupplierList();
      },

      async getDictList() {
        const res = await getDictList();
        if (res.code === 0) {
          this.coalTypeList = (res?.data || []).filter(
            (e) => e.dictType === 'coal_type'
          );
        }
      },

      //获取列表
      async getSupplierList() {
        try {
          const res = await getSupProductList(this.queryParams);
          if (res.code == 0) {
            if (this.queryParams.pageNo == 1) {
              this.lists = res.data.list || [];
            } else {
              this.lists = [...this.lists, ...res.data.list];
            }
            if (res.data.total == this.lists.length) {
              this.isMore = 'noMore';
            } else {
              this.isMore = 'more';
            }
          }
          wx.stopPullDownRefresh();
        } catch (e) {
          return false;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .popupDialg {
    width: 300px;
    height: 350px;
  }

  .infor-box {
    >view {
      display: inline-block;
    }

    .label {
      width: 20%;
    }

    .select-view {
      width: 77%;
    }
  }

  .content {
    height: 100vh;
    font-size: 24.88rpx;
    background-color: #e5e5e5;

    .content-box {
      padding: 20rpx;

      .item-box-ng {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;
        height: 124rpx;
        position: relative;

        .de-btns {
          position: absolute;
          right: 15px;
        }

        .item-box {
          height: 80rpx;
          line-height: 80rpx;
          box-sizing: content-box;
          padding: 20rpx;
          display: flex;
          justify-content: space-between;
          position: relative;
          width: 93%;
          background: #fff;
          border-radius: 16rpx;
          margin-bottom: 6rpx;

          .cph {
            flex: 1;
            font-weight: bold;
            font-size: 32rpx;
            padding-left: 20rpx;
          }
        }
      }
    }
  }
</style>